.contactDisplay-item-group {
    margin-bottom: 10px;

}
.contactDisplay-item {
    padding: 10px;
    display: flex;

    > div {
        flex: 1;
    }
}

.contactDisplay-item-value {
    display: block;
    width: 100%;
    word-wrap: break-word;
    max-width: 55%;
}

.contactDisplay-item[data-key="adr"] .contactDisplay-item-value {
    white-space: pre-wrap;
}

.contactDisplay-item[data-key="photo"] .contactDisplay-item-value,
.contactDisplay-item:not([data-key="photo"]) .contactDisplay-item-image { display: none }

.contactDisplay-item-label {
    display: block;
    max-width: 45%;
    width: 100%;
    .fa {
        width: 30px;
        text-align: center;
        color: $default-color;
    }
    color: $default-color-medium;
}

.contactDisplay-item-image {
    max-width: 65px;
    max-height: 65px;
}

// https://github.com/ProtonMail/Angular/issues/6522
// TODO: need to discuss what to do with these because multiple FNs are actually stored on the vCard, but only 1 is displayed
.contactDisplay-item[data-field="FN"]:not(:first-child) {
    display: none;
}
